<template>
  <div style="padding: 20px;">
    <div style="width: 300px;float: left;">
      <el-input v-model="input" placeholder="请输入内容" @input="searchFun"></el-input>
      <span style="display: inline-block;width: 100%;line-height: 35px;font-size: 14px;">匹配：{{currentActive}} / {{itemNum.length}}</span>
      <el-button type="primary" size="small" @click="upFun" v-loading="loading" :disabled="loading">上一个</el-button>
      <el-button type="primary" size="small"  @click="downFun" v-loading="loading" :disabled="loading">下一个</el-button>
    </div>
    <div style="width: 280px;border: 1px solid #ccc;float: left;margin-left: 30px;height: 400px;overflow-y: auto;" class="treeBox" ref="scroll">
      <el-tree
        ref="tree"
        default-expand-all
        :data="treeData"
        :default-expanded-keys="expandedArr"
        node-key="id"
        :key="treeKey"
        :props="defaultProps"
        @node-click="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="upDateArr.update"></span>
            <span style="display: inline-block;" :class="{activeSize: data.search, nextActive: data.nextBtn}">{{ data.name }}</span>
          </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expandedArr: [],
      loading: false,
      itemNum: [],
      allArr: [],
      target: [],
      targetAll: [],
      upDateArr: {
        update: false
      },
      treeKey: '',
      input: '',
      MenuTree: {},
      treeData: [],
      currentActive: 0,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
    this.getTreeData()
  },
  methods: {
    searchFun() {
      this.$set(this.upDateArr, 'update', true)
      this.itemNum = []
      this.currentActive = 0
      this.treeData.forEach(row => { // 重置
        this.resetFun(row)
      })
      this.target = []
      this.targetAll = []
      this.expandedArr = []
      if (this.input !== '') {
        this.treeData.forEach(row => {
          this.addActiveFun(row)
        })
        this.treeData.forEach(row => {
          this.firstFun(row)
        })
        this.$nextTick(() => {
          this.$refs.scroll.scrollTop = this.target.length * 40
        })
        if (this.itemNum.length !== 0) {
          this.currentActive += 1
        }
      } else {
        this.$nextTick(() => {
          this.$refs.scroll.scrollTop = 0
        })
      }
      this.$set(this.upDateArr, 'update', false)
    },
    addActiveFun(item) {
      this.expandedArr.push(item.id)
      if (item.name.indexOf(this.input) !== -1) {
        // 给匹配上的节点添加 class 类
        this.$set(item, 'search', true)
        this.itemNum.push(item)
      }
      if (item.children.length > 0) {
        item.children.forEach(val => {
          this.addActiveFun(val)
        })
      }
    },
    upFun() {
      if (!this.loading) {
        this.loading = true
        this.expandedArr = []
        this.$set(this.upDateArr, 'update', true)
        if (this.currentActive > 1) {
          this.target = []
          this.targetAll = []
          this.currentActive -= 1
          this.treeData.forEach(value => {
            this.nextBtnFun(value)
          })
          this.$nextTick(() => {
            this.$refs.scroll.scrollTop = this.target.length * 40
          })
        }
        this.$set(this.upDateArr, 'update', false)
        this.loading = false
      }
    },
    downFun() {
      if (!this.loading) {
        this.loading = true
        this.expandedArr = []
        this.$set(this.upDateArr, 'update', true)
        if (this.currentActive < this.itemNum.length) {
          this.target = []
          this.targetAll = []
          this.currentActive += 1
          this.treeData.forEach(value => {
            this.nextBtnFun(value)
          })
          this.$nextTick(() => {
            this.$refs.scroll.scrollTop = this.target.length * 40
          })
        }
        this.$set(this.upDateArr, 'update', false)
        this.loading = false
      }
    },
    nextBtnFun(row) {
      this.expandedArr.push(row.id)
      let isActiveSizeId = this.itemNum[this.currentActive - 1].id
      if (row.id === isActiveSizeId) {
        this.target = JSON.parse(JSON.stringify(this.targetAll))
        this.$set(row, 'nextBtn', true)
      } else {
        this.targetAll.push(row)
        this.$set(row, 'nextBtn', false)
      }
      if (row.children.length > 0) {
        row.children.forEach(val => {
          this.nextBtnFun(val)
        })
      }
    },
    firstFun(row) {
      if (this.itemNum.length !== 0) {
        let isActiveSizeId = this.itemNum[0].id
        if (row.id === isActiveSizeId) {
          this.target = JSON.parse(JSON.stringify(this.targetAll))
          this.$set(row, 'nextBtn', true)
        } else {
          this.targetAll.push(row)
          this.$set(row, 'nextBtn', false)
        }
        if (row.children.length > 0) {
          row.children.forEach(val => {
            this.firstFun(val)
          })
        }
      }
    },
    resetFun(row) {
      this.$set(row, 'search', false)
      this.$set(row, 'nextBtn', false)
      row.children.forEach(childRow => {
        this.resetFun(childRow)
      })
    },
    recursiveFun(row) { // 递归添加字段search = false
      row['search'] = false
      row['nextBtn'] = false
      row.children.forEach(childRow => {
        this.recursiveFun(childRow)
      })
    },
    getTreeData() {
      this.$store.dispatch('MenuTree', this.MenuTree).then(res => {
        this.treeData = res.data
        this.treeData.forEach(row => { // 循环树形控件数据，给每一项添加字段search = false
          this.recursiveFun(row)
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    handleNodeClick() {

    }
  }
}
</script>
<style>
  .treeBox .activeSize {
    color:rgb(64, 158, 255);
  }
  .treeBox .nextActive{
    color: red !important;
  }
</style>
